<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          班级管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :downTemplate="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  placeholder="班级关键字"
                  searchText="班级名："
                  cleanText="刷新"
                  exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            <Select v-model="searchParam.gradeId" label-in-value @on-change="queryFn" style="width:200px">
              <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{item.name}}
              </Option>
            </Select>
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="540"
           v-on:on-cancel="cancelSub">
      <Form ref="Form" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="名称" prop="name">
          <Input v-model="modal.form.name" placeholder="请输入班级名称" style="width:73%"/>
        </FormItem>
        <FormItem label="学龄段" prop="gradeId">
          <Select v-model="modal.form.gradeId" label-in-value @on-change="gradeChange" style="width:73%">
            <Option v-for="item in gradeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="主班" prop="mainMasterId">
          <Select v-model="modal.form.mainMasterId" label-in-value @on-change="mainMasterChange" style="width:73%">
            <Option v-for="item in teacherList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="保育员" prop="nurseId">
          <Select v-model="modal.form.nurseId" label-in-value @on-change="nurseChange" style="width:73%">
            <Option v-for="item in teacherList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="配班" prop="deputyMasterId">
          <Select v-model="modal.form.deputyMasterId" label-in-value @on-change="dutyMasterChange" style="width:73%">
            <Option v-for="item in teacherList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="modal.form.remark" type="textarea" placeholder="备注信息" style="width:73%"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelSub">取消</Button>
        <Button type="primary" @click="subForm" :loading="false">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          name: '',
          gradeId: '',
        },
        exportPath: Cookie.getJSON('cdnUrl'),
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            minWidth: 100,
          },
          {
            title: '班级名称',
            align: 'center',
            key: 'name',
            minWidth: 160,
          },
          {
            title: '学龄段',
            align: 'center',
            key: 'gradeName',
            minWidth: 100,
          },
          {
            title: '主班',
            align: 'center',
            key: 'mainMasterName',
            minWidth: 100,
          },
          {
            title: '配班',
            align: 'center',
            key: 'deputyMasterName',
            minWidth: 100,
          },
          {
            title: '保育员',
            align: 'center',
            key: 'nurseName',
            minWidth: 100,
          },
        ],
        operate: [],
        dataTable: [],
        gradeList: [],
        teacherList: [],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          form: {
            name: '',
            gradeId: '',
            gradeName: '',
            mainMasterId: '',
            mainMasterName: '',
            deputyMasterId: '',
            deputyMasterName: '',
            nurseId: '',
            nurseName: '',
            studentNum: 0,
            remark: '',
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }],
            'gradeId': [{
              required: true,
              trigger: 'blur',
              message: '必填项',
              type: 'number'
            }],
            'mainMasterId': [{
              required: true,
              trigger: 'blur',
              message: '必填项',
              type: 'number'
            }],
          }
        },
      };
    },
    methods: {
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加',
          form: {studentNum: 0}
        })
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑'
        })
        Object.assign(this.modal.form, data);
      },
      deleteFn(data) {
        let clazz = data[0];
        if (clazz.studentNum > 0) {
          this.$Message.error("该班级有宝贝，不能删除！");
          return;
        }
        API.deleteClazz({id: clazz.id}).then(resp => {
          this.queryFn();
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.searchParam.gradeId = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchClazz(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
        });
        this.$refs.Form.resetFields();
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            if (data.id) {
              API.updateClazz(data).then(resp => {
                this.complete();
                this.queryFn();
              })
            } else {
              API.createClazz(data).then(resp => {
                this.complete();
                this.queryFn();
              })
            }
          }
        })
      },
      cancelSub() {
        this.complete();
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
      fetchGradeAndTeacher() {
        API.fetchGradeAndTeacher().then(resp => {
          let data = resp.data;
          this.gradeList = data.gradeList;
          this.teacherList = data.teacherList;
        })
      },
      gradeChange(data) {
        if (data) {
          this.modal.form.gradeId = data.value;
          this.modal.form.gradeName = data.label;
        }
      },
      mainMasterChange(data) {
        if (data) {
          this.modal.form.mainMasterId = data.value;
          this.modal.form.mainMasterName = data.label;
        }
      },
      dutyMasterChange(data) {
        if (data) {
          this.modal.form.deputyMasterId = data.value;
          this.modal.form.deputyMasterName = data.label;
        }
      },
      nurseChange(data) {
        if (data) {
          this.modal.form.nurseId = data.value;
          this.modal.form.nurseName = data.label;
        }
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
      this.fetchGradeAndTeacher();
    }
  }
</script>

<style scoped>

</style>
